@font-face {
  font-family: 'roboto';
  src: url('../font/Roboto-BoldCondensedItalic.ttf') format('truetype');
}

html,body {
	height: 100%;
	width: 100%;
}

.content {
	height: 100%;
	width: 100%;
	background-color: #222;
}

.head-icon {
	position: absolute;
	width: 30%;
	border: #777 3px solid;
	border-radius: 50%;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
}

.line {
	position: absolute;
    width: 100%;
    height: 2px;
    top: 30vh;
    background-image: linear-gradient(45deg, transparent 50%, rgb(249, 164, 81) 90%, transparent);
    animation: lineMove 4s linear infinite;
}

@keyframes lineMove {
	100% {
		background-position: 100vw;
	}
}

.myname {
	position: absolute;
	color: #fff;
	font-size: 2.5em;
	top: 31vh;
	left: 50%;
	transform: translateX(-50%);
}

.email {
	position: absolute;
	width: 100%;
	top: 44vh;
}

.email-icon {
	position: absolute;
	left: 15vw;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	width: 13%;
}

.email-url {
    position: absolute;
	right: 9vw;
    top: 50%;
    transform: translateY(-50%);
	display: inline-block;
    color: #fff;
    font-size: 1.2em;
}

.qr {
	position: absolute;
    top: 52vh;
    left: 50%;
    width: 42vw;
    transform: translateX(-50%);
    border: rgb(249, 164, 81) 4px solid;
}

.footer {
	position: absolute;
	bottom: 0;
	height: 15vh;
	width: 100%;
	background-color: rgb(249, 164, 81);
	border-top: #222222 4px dashed;
}

.bar {
	position: absolute;
	background-color: #222;
	width: 5vw;
	height: 50%;
	left: 5vw;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 31%;
}

.footer {
	overflow: hidden;
}

.footer-text {
	font-family: 'roboto';
	position: absolute;
	top: 50%;
	left: 20vw;
	transform: translateY(-50%);
	font-size: 1.8rem;
} 

.contact {
	position: absolute;
	top: 50%;
	right: 5vw;
	height: 2rem;
	width: 2rem;
	background-color: #fff;
	transform: translateY(-50%);
	border: #222 4px solid;
}

.arrow {
	color: #222;
    font-size: 2rem;
    font-weight: 700;
    font-family: '黑体';
	opacity: 0.25;
    margin-left: -18vh;
	margin-top: -5%;
	animation: arrowMove 2s 2s infinite ;
}

@keyframes arrowMove {
	50% {
		opacity: 1;
		margin-left: -6vh;
	}
	100% {
		opacity: 1;
		margin-left: -6vh;
	}
}

.clickme {
	position: absolute;
    width: 150%;
    font-family: 'roboto';
    color: #222;
    margin-top: -52%;
    font-size: 0.1rem;
}

.penguin {
	position: absolute;
    bottom: -19px;
    right: 86px;
    width: 21%;
    opacity: 0.1;
    transform: rotate(-30deg);
}

.tick {
	position: absolute;
    margin-top: -129%;
    width: 3em;
    height: 2.5em;
}

.tick-line {
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
}

@keyframes showTick_1 {
	100% {
		stroke-dashoffset: 33;
	}
}

@keyframes showTick_2 {
	100% {
		stroke-dashoffset: 0;
		stroke: rgb(217, 54, 115);
	}
}